<template>
  <div class="navBarWrap">
    <ul>
      <li
        :class="{ active: '/' + item.path == $route.path }"
        v-for="item in list"
        :key="item.path"
        @click="toPage(item.path)"
      >
        <img
          :src="
            '/' + item.path == $route.path ? item.meta.iconSel : item.meta.icon
          "
          alt=""
        />
        {{ item.meta.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(14, this.$router);
    console.log(16, this.$route);
  },
  computed: {
    list() {
      //   console.log(this.$router.options.routes);
      let routes = this.$router.options.routes[0].children;
      routes = routes.filter((item) => !item.meta.hidden);
      return routes;
    },
  },
  data() {
    return {
      //   list: [
      //     {
      //       text: "新闻列表",
      //       path: "/newsList",
      //     },
      //     {
      //       text: "新闻分类",
      //       path: "/newsType",
      //     },
      //     {
      //       text: "用户管理",
      //       path: "/users",
      //     },
      //   ],
    };
  },
  methods: {
    toPage(path) {
      // 如果本来就是xxx页面，那么要跳的页面也是xxx，那么不需要跳转
      if (path == this.$route.path) {
        return;
      }
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss"  scoped>
.navBarWrap {
  width: 200px;
  background: rgb(57, 61, 73);
  height: calc(100vh - 80px);
  text-align: center;
  ul {
    margin-top: 20px;
  }
  li {
    color: white;
    margin-top: 6px;
    cursor: pointer;
    img {
      width: 14px;
    }
  }
  li:hover {
    color: rgb(114, 181, 244);
  }
  .active {
    color: rgb(114, 181, 244);
  }
}
</style>